<head>
<script type="text/javascript" src="media/prototype/prototype.js"></script>
<script type="text/javascript" src="media/flotr/flotr.js"></script>
<script type="text/javascript" src="media/flotr/canvas2image.js"></script>
<script type="text/javascript" src="media/flotr/canvastext.js"></script>
<script type="text/javascript" src="media/flotr/excanvas.js"></script>
<script type="text/javascript" src="media/humble/HumbleFinance.js"></script>
<script type="text/javascript" src="media/humble/prettify.js"></script>
<script type="text/javascript" src="media/humble/Finance.js"></script>
<script type="text/javascript" src="media/humble/demo.js"></script>
<link rel="stylesheet" type="text/css" href="media/humble/finance.css">
<script type="text/javascript">
var jsonData={{ jsonData|safe }}
var priceData={{ priceData }}
var summaryData={{ summaryData }}
</script>
</head>

<body>

<div>
<h1> Otus Metrics Query v0.1 </h1>
</div>

<form>
Metric:
<select name="name">
{% for metricname in nameOpt%}
<option value={{ metricname }}> {{ metricname }} </option>
{% endfor %}
</select>
Host:
<select name="host">
{% for hostname in hostOpt%}
<option value={{ hostname }}> {{ hostname }} </option>
{% endfor %}
</select>
Start Time:
<select name="start_year">
{% for o in yearOpt%}
<option value={{ o }}> {{ o }} </option>
{% endfor %}
</select>-
<select name="start_month">
{% for o in monthOpt%}
<option value={{ o }}> {{ o }} </option>
{% endfor %}
</select>-
<select name="start_day">
{% for o in dayOpt%}
<option value={{ o }}> {{ o }} </option>
{% endfor %}
</select>&nbsp
<select name="start_hour">
{% for o in hourOpt%}
<option value={{ o }}> {{ o }} </option>
{% endfor %}
</select>:
<select name="start_min">
{% for o in minOpt%}
<option value={{ o }}> {{ o }} </option>
{% endfor %}
</select>:
<select name="start_sec">
{% for o in secOpt%}
<option value={{ o }}> {{ o }} </option>
{% endfor %}
</select>


End Time:
<select name="end_year">
{% for o in yearOpt%}
<option value={{ o }}> {{ o }} </option>
{% endfor %}
</select>-
<select name="end_month">
{% for o in monthOpt%}
<option value={{ o }}> {{ o }} </option>
{% endfor %}
</select>-
<select name="end_day">
{% for o in dayOpt%}
<option value={{ o }}> {{ o }} </option>
{% endfor %}
</select>&nbsp
<select name="end_hour">
{% for o in hourOpt%}
<option value={{ o }}> {{ o }} </option>
{% endfor %}
</select>:
<select name="end_min">
{% for o in minOpt%}
<option value={{ o }}> {{ o }} </option>
{% endfor %}
</select>:
<select name="end_sec">
{% for o in secOpt%}
<option value={{ o }}> {{ o }} </option>
{% endfor %}
</select>


<input type="submit" value="Submit"/>
</form>

<div id="metricName">Metric</div> <div id="dataPoint"></div>

<div id="metric">
    <div id="labels">
        <div id="time">
            <a onclick="HumbleFinance.zoom(5);">1w</a>
            <a onclick="HumbleFinance.zoom(21);">1m</a>
            <a onclick="HumbleFinance.zoom(65);">3m</a>
            <a onclick="HumbleFinance.zoom(127);">6m</a>
            <a onclick="HumbleFinance.zoom(254);">1y</a>
            <a onclick="HumbleFinance.zoom(1265);">5y</a>
        </div>
        <div id="dateRange"></div>
    </div>
</div>
<br/>
</body>
